<template>
	<!-- 活期 -->
	<view class="container">
		<scroll-view scroll-y class="scroll">
			<view class="title">
				<view class="left">
					零钱理财
				</view>
				<view class="right">
					超500000+购买
				</view>
			</view>
			<view class="tips">
				收益稳健,轻松理财;申赎灵活,使用方便;严控风险,当心之选;精品热销,先到先得。
			</view>
			<view class="tipsImg">
				<view class="imgContainer">
					<img src="../../static/current/current.png">
					<text>为您甄选 活期精品</text>
				</view>
			</view>
			<view class="list">
				<view class="cu-card case card" v-for="(item) in current" :key="item.id">
					<view class="cu-item shadow">
						<navigator url="../../pages/fundRanking/fundRanking">
							<view class="cardTitle">
								<view class="cardtitle">
									{{item.title}}
								</view>
								<view class='cu-tag light bg-orange radius' style="width: 20%;margin-left: 20rpx;">
									{{item.tag}}
								</view>
							</view>
						</navigator>
						<view class="cardContent">
							<navigator url="../../pages/fundRanking/fundRanking" style="width: 70%;display: flex;">
								<view class="content-item">
									<view class="prcent" style="color: #F85656;">
										{{item.prcent}}
									</view>
									<view class="btm">
										{{item.prcentTitle}}
									</view>
								</view>
								<view class="content-item">
									<view class="prcent">
										{{item.type}}
									</view>
									<view class="btm">
										{{item.typeTile}}
									</view>
								</view>
							</navigator>
							<view class="content-items">
								<button class="cu-btn bg-blue">立即购买</button>
							</view>
						</view>
						<view class="btmWord">
							{{item.tips}}
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<i class="cuIcon-title"></i>
				过往业绩不预示未来表现，市场有风险，投资需谨慎
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: [{
						id: 1,
						title: '国金众赢货币',
						tag: '灵活申赎',
						prcent: '3.10%',
						prcentTitle: '七日年化收益率',
						type: '活期',
						typeTile: '先到先得',
						tips: '过往业绩不预示未来表现，市场有风险，投资需谨慎'
					},
					{
						id: 2,
						title: '国金众赢货币',
						tag: '灵活申赎',
						prcent: '3.10%',
						prcentTitle: '七日年化收益率',
						type: '活期',
						typeTile: '先到先得',
						tips: '太平养老是中管金融机构中国太平保险集团有限责任公司旗下专业经营养老金业务和员工福利保障业务的重要子公司'
					},
					{
						id: 3,
						title: '国金众赢货币',
						tag: '灵活申赎',
						prcent: '3.10%',
						prcentTitle: '七日年化收益率',
						type: '活期',
						typeTile: '先到先得',
						tips: '太平养老是中管金融机构中国太平保险集团有限责任公司旗下专业经营养老金业务和员工福利保障业务的重要子公司'
					},
					{
						id: 4,
						title: '国金众赢货币',
						tag: '灵活申赎',
						prcent: '3.10%',
						prcentTitle: '七日年化收益率',
						type: '活期',
						typeTile: '先到先得',
						tips: '太平养老是中管金融机构中国太平保险集团有限责任公司旗下专业经营养老金业务和员工福利保障业务的重要子公司'
					},
					{
						id: 5,
						title: '国金众赢货币',
						tag: '灵活申赎',
						prcent: '3.10%',
						prcentTitle: '七日年化收益率',
						type: '活期',
						typeTile: '先到先得',
						tips: '太平养老是中管金融机构中国太平保险集团有限责任公司旗下专业经营养老金业务和员工福利保障业务的重要子公司'
					},
				]
			}
		},
		onLoad(options) {
			
		},
		methods: {

		}
	}
</script>

<style scoped="scoped" lang="scss">
	.container {
		height: 100vh;
		background-color: #FFFFFF;

		.scroll {
			height: 100%;

			.title {
				width: 100%;
				display: flex;
				height: 100rpx;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 10rpx 20rpx;

				.left {
					font-size: 40rpx;
					color: #333333;
					font-weight: bold;
				}

				.right {
					color: #999999;
				}
			}

			.tips {
				width: 100%;
				height: 120rpx;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				color: #999999;
				font-size: 30rpx;
				line-height: 50rpx;
			}

			.tipsImg {
				width: 100%;
				height: 80rpx;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				margin-top: 10rpx;

				.imgContainer {
					height: 60rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					border-radius: 30rpx 10rpx 10rpx 30rpx;
					background-image: linear-gradient(to right, #fee6e6, #fef5f5);

					img {
						width: 60rpx;
						height: 60rpx;
					}

					text {
						margin-left: 30rpx;
						color: #F86262
					}
				}
			}

			.list {
				background-color: #f9f9f9;

				.card {
					height: 380rpx;

					.cu-item {
						height: 360rpx;
						box-sizing: border-box;
						padding: 25rpx;
						margin-bottom: 0;

						.cardTitle {
							display: flex;
							align-items: center;
							justify-content: start;

							.cardtitle {
								font-size: 35rpx;
							}
						}

						.cardContent {
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-bottom: 1rpx solid #CCCCCC;
							height: 150rpx;

							.content-item {
								width: 50%;
								text-align: center;

								.prcent {
									font-size: 40rpx;
									font-weight: bold;
									color: #333333;
								}

								.btm {
									color: #999999;
								}
							}
						}

						.btmWord {
							margin-top: 25rpx;
							height: 80rpx;
							color: #999999;
							box-sizing: border-box;
							padding: 0 0 15rpx 0;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}
				}
			}

			.footer {
				height: 100rpx;
				padding-left: 35rpx;
				color: #999999;
				background-color: #f9f9f9;
				font-size: 25rpx;
				display: flex;
				align-items: center;

				i {
					margin-right: 20rpx;
				}
			}
		}
	}
</style>
